<template>
  <!--  -->
  <div class="date-box">
    <div class="date-head flex">
      <img
        @click="dateIconClick('left')"
        class="date-icon"
        src="@/assets/icon/back.png"
        alt=""
      />
      <picker
        mode="multiSelector"
        :range="range"
        :value="pickerValue"
        @change="pickerChange"
      >
        <div class="date-title flex">
          <div>{{ year }}年{{ month }}月</div>
        </div>
      </picker>
      <img
        @click="dateIconClick('right')"
        class="date-icon"
        src="@/assets/icon/back.png"
        alt=""
      />
    </div>

    <div class="week-box flex">
      <div class="week-item flex" v-for="item in weekList" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="day-box flex">
      <div
        class="day-item flex"
        :class="[{ 'day-item-active': currentTime === item?.value }]"
        v-for="(item, index) in daysList"
        :key="index"
        @click="dayItemClick(item)"
      >
        {{ item?.day }}
      </div>
    </div>
    <div class="date-sure flex btn" @click="sure">确认</div>
  </div>
</template>

<script setup>
import $common from "@/utils/$common";
import { onMounted } from "vue";

const props = defineProps({
  date: {
    default: "",
  },
});
const emits = defineEmits(["change"]);

onMounted(() => {
  currentTime = $common.getCustomTime(props.date, "YYYY-M-D");
  initDate(props.date);
  initDays();
  initPicker();
});

let year = $ref(""); //当前年份
let month = $ref(""); //当前月份
let currentTime = $ref("");

const weekList = ["一", "二", "三", "四", "五", "六", "日"];
function initDate(date) {
  if (date) {
    year = $common.getCustomTime(date, "YYYY");
    month = $common.getCustomTime(date, "M");
  } else {
    year = $common.getCustomTime("", "YYYY");
    month = $common.getCustomTime("", "M");
  }
}

let daysList = $ref([]);
function initDays() {
  daysList = [];
  let seatNum = $common.getCustomTime(`${year}-${month}-01`, "week");
  seatNum = seatNum == 0 ? 6 : seatNum - 1;
  daysList = new Array(35);
  let days = new Date(year, month, 0).getDate();
  let num = 1;
  for (let i = seatNum; i < days; i++) {
    daysList[i] = {
      year: year,
      month: month,
      day: num,
      value: `${year}-${month}-${num}`,
    };
    num++;
  }
}

function dateIconClick(type) {
  if (type == "left") {
    month = month - 1;
    if (month == 0) {
      year = year - 1;
      month = 12;
    }
    initDays();
  }
  if (type == "right") {
    month = parseInt(month) + 1;
    if (month == 12) {
      year = parseInt(year) + 1;
      month = 1;
    }
    initDays();
  }
}

function dayItemClick(item) {
  if (!item.value) {
    return;
  }
  currentTime = item.value;
}

function sure() {
  emits("change", currentTime);
}

let range = [
  [2024, 2025, 2026, 2027],
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
];

let pickerValue = $ref([]);
function initPicker() {
  let val1 = range[0].findIndex((item) => item == year);
  let val2 = range[1].findIndex((item) => item == month);
  pickerValue = [val1, val2];
}

function pickerChange(data) {
  pickerValue = data.detail.value;
  year = range[0][pickerValue[0]];
  month = range[1][pickerValue[1]];

  initDays();
}
</script>
<style lang="scss" scoped>
.date-box {
  width: 100%;
  padding: 0 20rpx;
  font-size: 28rpx;

  .date-head {
    line-height: 1;
    margin-bottom: 20rpx;
    .date-title {
      text-align: center;
      padding: 20rpx 0;
      font-weight: 500;
      font-size: 32rpx;
    }
    .date-icon {
      width: 34rpx;
      height: 34rpx;
      padding: 0 20rpx;
      margin: 0 20rpx;
      box-sizing: content-box;
      &:last-of-type {
        transform: rotate(180deg);
      }
    }
  }

  .week-box {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 20rpx 0;
    line-height: 1;
    margin-bottom: 10rpx;
    .week-item {
      width: calc(1 / 7 * 100%);
      &:nth-of-type(7n-1) {
        color: $theme-color;
      }
      &:nth-of-type(7n) {
        color: $theme-color;
      }
    }
  }
  .day-box {
    flex-wrap: wrap;
    justify-content: flex-start;
    .day-item {
      width: calc(1 / 7 * 100%);
      height: 100rpx;
      border-radius: 50%;
      &:nth-of-type(7n-1) {
        color: $theme-color;
      }
      &:nth-of-type(7n) {
        color: $theme-color;
      }
    }
    .day-item-active {
      background-color: $theme-color;
      color: #fff !important;
    }
  }
  .date-sure {
    width: 660rpx;
    height: 80rpx;
    background-color: $theme-color;
    margin: 40rpx auto 0;
    border-radius: 12rpx;
    color: #fff;
  }
}
</style>
